<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/css/bootstrap.min.css" rel="stylesheet">
  <style>
    ul{
      margin:0;
      padding:0;
    }
    li{
      list-style: none;
    }
    .selected{
      background-color: #f1f1f1;
      border:solid 1px #55a532;
    }
  </style>
</head>
<body>
<!--ul#login_list>li.item${$}*10 emmet表达式-->
<ul id="login_list">
  <li class="item1">1</li>
  <li class="item2">2</li>
  <li class="item3">3</li>
  <li class="item4">4</li>
  <li class="item5">5</li>
  <li class="item6">6</li>
  <li class="item7">7</li>
  <li class="item8">8</li>
  <li class="item9">9</li>
  <li class="item10">10</li>
</ul>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.0/js/bootstrap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.7.5/socket.io.min.js"></script>
<script>
  const socket = io("http://localhost:3000");
  socket.on('send', (data) => {
    console.log(data,'>>>>>')
  })
 socket.emit('send', {name: 'test'})
  $('#login_list li').on('click', function() {
    console.log('click',this)
    $(this).addClass('selected').siblings().removeClass('selected')
  })
</script>
</body>
</html>